<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品添加页面</title>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        .message {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            background-color: #dff0d8;
            color: #3c763d;
        }
        .error {
            background-color: #f2dede;
            color: #a94442;
        }
        .back-btn {
            background-color: #f44336;
        }
        .back-btn:hover {
            background-color: #d32f2f;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>添加商品</h1>
        <div class="form-group">
            <label for="name">SKU名称</label>
            <input type="text" id="name" v-model="product.name" placeholder="请输入SKU名称">
        </div>
        <div class="form-group">
            <label for="price">价格（分）</label>
            <input type="number" id="price" v-model.number="product.price" placeholder="请输入价格（分）">
        </div>
        <div class="form-group">
            <label for="stock">库存数量</label>
            <input type="number" id="stock" v-model.number="product.stock" placeholder="请输入库存数量">
        </div>
        <div class="form-group">
            <label for="image">商品图片</label>
            <input type="text" id="image" v-model="product.image" placeholder="请输入商品图片链接">
        </div>
        <div class="form-group">
            <label for="category">类目名称</label>
            <input type="text" id="category" v-model="product.category" placeholder="请输入类目名称">
        </div>
        <div class="form-group">
            <label for="brand">品牌名称</label>
            <input type="text" id="brand" v-model="product.brand" placeholder="请输入品牌名称">
        </div>
        <div class="form-group">
            <label for="spec">规格（示例：{"颜色": "黑色", "尺寸": "28英寸"}）</label>
            <textarea id="spec" v-model="product.spec" placeholder="请按照JSON格式输入商品规格"></textarea>
        </div>
        <div class="form-group">
            <label for="isAD">是否是推广广告</label>
            <select id="isAD" v-model="product.isAD">
                <option value="true">是</option>
                <option value="false">否</option>
            </select>
        </div>
        <button @click="addProduct">添加商品</button>
        <a href="./index.html">
            <button class="back-btn">返回商城</button>
        </a>
        <div v-if="message" :class="messageType" class="message">{{ message }}</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                product: {
                    name: '',
                    price: 0,
                    stock: 0,
                    image: '',
                    category: '',
                    brand: '',
                    spec: '',
                    isAD: false
                },
                message: '',
                messageType: ''
            },
            methods: {
                addProduct() {
                    if (!this.product.name || !this.product.price || !this.product.stock) {
                        this.message = '请填写必填字段（SKU名称、价格、库存数量）';
                        this.messageType = 'error';
                        return;
                    }
                    
                    try {
                        JSON.parse(this.product.spec);
                    } catch (e) {
                        this.message = '规格字段必须是有效的JSON格式';
                        this.messageType = 'error';
                        return;
                    }
                    
                    axios.post('/api/items', this.product)
                        .then(response => {
                            this.message = '商品添加成功！';
                            this.messageType = 'success';
                            this.resetForm();
                        })
                        .catch(error => {
                            this.message = '添加商品失败，请稍后重试';
                            this.messageType = 'error';
                            console.error('添加商品错误:', error);
                        });
                },
                resetForm() {
                    this.product = {
                        name: '',
                        price: 0,
                        stock: 0,
                        image: '',
                        category: '',
                        brand: '',
                        spec: '',
                        isAD: false
                    };
                }
            }
        });
    </script>
</body>
</html>